<template>
  <div v-if="!route.meta.hidden">
    <el-menu-item
      v-if="!route.children"
      :index="route.path"
      :key="route.path"
      @click="clickMenu"
    >
      <!-- <el-icon><location /></el-icon> -->
      <i :class="route.meta.icon" class="icon iconfont"></i>
      <template #title>
        <span>{{ route.meta.title }}</span>
      </template>
    </el-menu-item>
    <el-sub-menu
      v-else-if="route.path !== '/'"
      :index="route.path"
      :key="route.path"
      :popper-append-to-body="true"
    >
      <template #title>
        <i :class="route.meta.icon" class="icon iconfont"></i>
        <!-- <el-icon><Setting /></el-icon> -->
        <span>{{ route.meta.title }}</span>
      </template>
      <MenuItem v-for="item in route.children" :key="item.path" :route="item" />
    </el-sub-menu>
    <MenuItem
      v-else
      v-for="item in route.children"
      :key="item.path"
      :route="item"
    />
  </div>
</template>

<script>
// import { Location, Setting } from "@element-plus/icons";
export default {
  name: "MenuItem",
  props: {
    route: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    // Location,
    // Setting,
  },
  methods: {
    clickMenu(item) {
      this.$store.commit('selectMenu',item)
    },
  },
};
</script>

<style lang="scss" scoped>
.iconfont {
  padding-right: 5px;
}
</style>
